<template>
  <div id="history-container">
    <p class="title"></p>
    <ol class="list">
      <li class="item">对局开始！</li>
      <li class="item" v-for="(r, index) in records" :key="index">
        {{ r }}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  name: 'History',
  data() {
    return {
      records: []
    }
  },
  mounted() {
    // 自定义事件：记录当前玩家的操作
    this.$bus.$on('record', (row, col, val) => this.record(row, col, val))
    // 自定义事件：清空 records
    this.$bus.$on('HistoryReset', () => this.reset())
  },
  beforeDestroy() {
    // 解绑自定义事件
    this.$bus.$off('HistoryReset')
  },
  methods: {
    /**
     * 记录当前玩家的落子信息
     */
    record(row, col, val) {
      this.records.push(`${val}: 落子为（${row}，${col}）`)
    },

    /**
     * 重置历史记录
     */
    reset() {
      this.records = []
    }
  }
}
</script>

<style lang="less" scoped>
#history-container {
  border-top: 1px solid black;
  
  // 标题
  .title {
    margin: 10px 0;
  }

  // 记录列表
  .list {
    .item {
      margin: 5px 0;
    }
  }
}
</style>